<template>
  <div>
    <Card>
      <div class="table-page-search-wrapper">
        <Form inline :model="queryParams" ref="searchForm" :label-width="80">
          <FormItem label="规则编号">
            <Input v-model="queryParams.id" placeholder=""/>
          </FormItem>
          <FormItem label="使用状态">
            <Select v-model="queryParams.status" placeholder="请选择" >
              <Option value="0">全部</Option>
              <Option value="1">关闭</Option>
              <Option value="2">运行中</Option>
            </Select>
          </FormItem>
          <FormItem label="调用次数">
            <InputNumber v-model="queryParams.callNo" style="width: 100%"/>
          </FormItem>
          <FormItem label="使用状态">
            <Select v-model="queryParams.useStatus" placeholder="请选择">
              <Option value="0">全部</Option>
              <Option value="1">关闭</Option>
              <Option value="2">运行中</Option>
            </Select>
          </FormItem>
          <FormItem label="使用状态">
            <Select v-model="queryParams.status" placeholder="请选择" >
              <Option value="0">全部</Option>
              <Option value="1">关闭</Option>
              <Option value="2">运行中</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch(1)">查询</Button>&nbsp;
            <Button @click="handleResetForm('searchForm')">重置</Button>
          </FormItem>
        </Form>
      </div>
      <div class="table-operator">
        <Button type="primary">新建</Button>
      </div>
      <Table border :columns="columns" :data="data" :loading="loading">
        <template slot="status" slot-scope="{ row }">
          <Badge v-if="row.status===1" status="success" text="正常"/>
          <Badge v-else-if="row.status===2" status="warning" text="锁定"/>
          <Badge v-else="" status="error" text="禁用"/>
        </template>
        <template slot="action" slot-scope="{ row }">
          <a :disabled="$auth('developerEdit')?false:true" @click="handleModal(row)">编辑</a>&nbsp;
          <Dropdown v-show="$auth('developerEdit')" transfer ref="dropdown" @on-click="handleClick($event,row)">
            <a href="javascript:void(0)">
              <span>更多</span>
              <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem name="sendToEmail">发送到密保邮箱</DropdownItem>
            </DropdownMenu>
          </Dropdown>&nbsp;
        </template>
      </Table>
      <Row>
        <Page
          class="table-page-toolbar"
          transfer
          :total="queryParams.total"
          style="float:right"
          :current="queryParams.page"
          :page-size="queryParams.pageSize"
          show-elevator
          show-sizer
          show-total
          @on-change="handlePage"
          @on-page-size-change="handlePageSize"></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import { STable } from '@/components'
// eslint-disable-next-line no-unused-vars
import {  getServiceList } from '@/api/manage'

export default {
  name: 'TableList',
  components: {
    STable
  },
  data () {
    return {
      loading: false,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        sort: 'createTime',
        order: 'desc'
      },
      data: [],
      // 表头
      columns: [
        {
          title: '#'
        },
        {
          title: '规则编号',
          key: 'no'
        },
        {
          title: '描述',
          key: 'description'
        },
        {
          title: '服务调用次数',
          key: 'callNo'
        },
        {
          title: '状态',
          key: 'status'
        },
        {
          title: '更新时间',
          key: 'updatedAt'
        },
        {
          title: '操作',
          key: 'action',
          width: '150px'
        }
      ]
    }
  },
  created () {
    this.handleSearch()
  },
  methods: {
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    handlePage (current) {
      this.pageInfo.page = current
      this.handleSearch()
    },
    handlePageSize (size) {
      this.pageInfo.pageSize = size
      this.handleSearch()
    },
    handleSearch (page) {
      if (page) {
        this.queryParams.page = page
      }
      this.loading = true
      getServiceList(this.queryParams)
        .then(res => {
          console.log(res)
          this.data = res.result.data
          this.queryParams.total = res.result.totalCount
        }).finally(() => {
          this.loading = false
        })
    },
    handleResetForm (name) {
      this.$refs[name].resetFields()
      this.handleSearch(1)
    }
  }
}
</script>
